import React, { useState, useEffect } from 'react'
import { getChannels } from '../api/channel'

export default function UseEffectDemo () {
  //   console.log('---UseEffectDemo---')

  // 需求1，根据模型值的变化，而更改 浏览器的 标题（dom操作）
  const [count, setCount] = useState(100)
  const [name, setName] = useState('zhangsan')
  const [channels, setChannels] = useState([])
  const [position, setPosition] = useState({ x: 0, y: 0 })

  // 现在这个写法，就有点类似于 vue 中的 watch，然后配置立即执行
  // useEffect 第一种写法，几乎不用，因为只要模型发生了改变，视图就跟着变了
  //   useEffect(() => {
  //     console.log('---useEffect1---')
  //     // 第一次会执行，模型发生了改变之后，会执行
  //     // 副作用之一：更改dom
  //     document.title = count
  //   })

  // useEffect第二种写法，要写上第二个参数（是个数组，可以一个都不写，或是写1个或是n个）
  //   useEffect(() => {
  //     console.log('---useEffect2---')
  //     // 第一次会执行，然后依赖的模型 count 发生了改变之后，也会执行
  //     document.title = count
  //   }, [count])

  // useEffect第三种写法，如果你的第二个参数是一个[]空数组，那么它自始至终，只会执行一次
  // 第二个副作用：发请求
  // const getChannelsData = async () => {
  //   const res = await getChannels()
  //   console.log('---res---', res)
  //   setChannels(res.data)
  // }
  // useEffect(() => {
  //   // console.log('---useEffect3---')
  //   // async function getChannelsData () {
  //   //   const res = await getChannels()
  //   //   console.log('---res---', res)
  //   //   setChannels(res.data)
  //   // }

  //   getChannelsData()
  // }, [])

  // useEffect第四种写法
  // 副作用的第三种，事件监听
  useEffect(() => {
    // componentDidMount
    console.log('---useEffect4---')

    const move = e => {
      console.log('---e---', e)
      setPosition({ x: e.clientX, y: e.clientY })
    }

    window.addEventListener('mousemove', move)

    // 组件销毁的时候，就执行
    return () => {
      // componentWillUnmount
      console.log('---组件销毁了---')
      window.removeEventListener('mousemove', move)
    }
  }, [])

  return (
    <div>
      UseEffectDemo
      <p>count is {count}</p>
      <p>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </p>
      <p>
        <input value={name} onChange={e => setName(e.target.value)} />
      </p>
      <ul>
        {channels.map(item => {
          return <li key={item.id}>{item.name}</li>
        })}
      </ul>
      <p>
        我的位置是 {position.x},{position.y}
      </p>
    </div>
  )
}
